<template>
  <div style="margin-top: 30px">
    <div style="display: flex; justify-content: space-between">
      投递方式：
      <el-input
        placeholder="请输入投递方式"
        prefix-icon="el-icon-search"
        clearable
        @clear="initSendResume"
        style="width: 200px; margin-right: 10px"
        v-model="way"
        @keydown.enter.native="initSendResume"
      >
      </el-input>
      公司名：
      <el-input
        placeholder="请输入公司名"
        prefix-icon="el-icon-search"
        clearable
        @clear="initSendResume"
        style="width: 200px; margin-right: 10px"
        v-model="company"
        @keydown.enter.native="initSendResume"
      >
      </el-input>
      备注：
      <el-input
        placeholder="请输入备注"
        prefix-icon="el-icon-search"
        clearable
        @clear="initSendResume"
        style="width: 200px; margin-right: 10px"
        v-model="note"
        @keydown.enter.native="initSendResume"
      >
      </el-input>
      <el-button icon="el-icon-search" type="primary" @click="initSendResume">
        搜索
      </el-button>
      <el-button type="primary" icon="el-icon-plus" @click="showAddView">
        添加记录
      </el-button>
    </div>
    <el-table :data="sendResumes" stripe border style="width: 100%">
      <el-table-column prop="sendTime" fixed align="left" label="投递时间">
      </el-table-column>
      <el-table-column prop="updateTime" align="left" label="更新时间">
      </el-table-column>
      <el-table-column prop="way" align="left" label="投递方式">
      </el-table-column>
      <el-table-column prop="company" align="left" label="公司">
      </el-table-column>
      <el-table-column prop="url" align="left" label="官网地址">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" class="address">{{
            scope.row.url
          }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="note" align="left" label="备注">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope"> 

          <el-button
            @click="showEditView(scope.row)"
            style="padding: 10px"
            size="mini"
            >编辑</el-button>

            <el-button
            @click="doDelete(scope.row.id)"
            style="padding: 10px"
            size="mini"
            >删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: flex-end">
      <el-pagination
        background
        @current-change="currentChange"
        @size-change="sizeChange"
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="dialogAddVisible" width="80%">
      <el-form :model="sendResume" ref="sendResumeForm" :rules="rules">
        <el-row>
          <el-col :span="6">
            <el-form-item label="公司:" prop="company">
              <el-input
                size="mini"
                style="width: 200px"
                prefix-icon="el-icon-edit"
                v-model="sendResume.company"
                placeholder="请输入投递公司"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="途径:" prop="way">
              <el-input
                size="mini"
                style="width: 200px"
                prefix-icon="el-icon-edit"
                v-model="sendResume.way"
                placeholder="请输入投递途径"
              ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="投递地址:" prop="url">
              <el-input
                size="mini"
                style="width: 200px"
                prefix-icon="el-icon-edit"
                v-model="sendResume.url"
                placeholder="请输入投递地址"
              ></el-input>
            </el-form-item>
          </el-col>
         
          <el-col :span="6">
            <el-form-item label="时间:" prop="sendTime">
              <el-date-picker
                v-model="sendResume.sendTime"
                size="mini"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 200px"
                placeholder="不输就默认当前时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
           <el-col :span="20">
            <el-form-item label="备注:" prop="note">
              <el-input
                size="mini"
                style="width: 800px"
                prefix-icon="el-icon-edit"
                v-model="sendResume.note"
                placeholder="请输入备注信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAdd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="dialogUpdateVisible" width="80%">
      <el-form :model="sendResume" ref="sendUpdateForm" :rules="rules">
        <el-row>
           <el-col :span="6">
            <el-form-item label="投递地址:" prop="url">
              <el-input
                size="mini"
                style="width: 200px"
                prefix-icon="el-icon-edit"
                v-model="sendResume.url"
                placeholder="请输入投递地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="更新时间:" prop="updateTime">
              <el-date-picker
                v-model="sendResume.updateTime"
                size="mini"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 200px"
                placeholder="不输就默认当前时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
           <el-col :span="20">
            <el-form-item label="备注信息:" prop="note">
              <el-input
                size="mini"
                style="width: 800px"
                prefix-icon="el-icon-edit"
                v-model="sendResume.note"
                placeholder="请输入备注信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "EmpAdv",
  data() {
    return {
      sendResumes: [],
      way: "",
      company: "",
      note: "",
      total: 0,
      page: 1,
      size: 10,
      dialogAddVisible: false,
      dialogUpdateVisible:false,
      title: "",
      sendResume: {
        id: "",
        hId: "",
        sendTime: "",
        updateTime: "",
        way: "",
        company: "",
        url: "",
        note: "",
      },
      rules: {
        way: [{ required: true, message: "请输入投递途径", trigger: "blur" }],
        company: [
          { required: true, message: "请输入投递公司", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.initSendResume();
  },
  methods: {
    initSendResume() {
      let url =
        "/sendResume/?page=" +
        this.page +
        "&size=" +
        this.size +
        "&hId=" +
        window.sessionStorage.getItem("userId");
      if (this.way) {
        url += "&way=" + this.way;
      }
      if (this.company) {
        url += "&company=" + this.company;
      }
      if (this.note) {
        url += "&note=" + this.note;
      }
      this.getRequest(url).then((resp) => {
        if (resp) {
          this.sendResumes = resp.data;
          this.total = resp.total;
        }
      });
    },
    currentChange(currentPage) {
      this.page = currentPage;
      this.initSendResume("advanced");
    },
    showAddView() {
      this.emptyForm();
      this.title = '新增投递信息';
      this.dialogAddVisible = true;
    },
    showEditView(data) {
                this.emptyForm();
                this.title = '编辑投递信息';
                this.sendResume = data;
                this.dialogUpdateVisible = true;
    },
    sizeChange(currentSize) {
      this.size = currentSize;
      this.initSendResume();
    },

    doAdd() {
      this.$refs["sendResumeForm"].validate((valid) => {
        if (valid) {
          let url = "/sendResume/add";
          this.sendResume.hId = window.sessionStorage.getItem("userId");
          if (!this.sendResume.sendTime) {
            this.sendResume.sendTime = this.getNowFormatDate();
          }
          this.sendResume.updateTime = this.sendResume.sendTime;
          this.postRequest(url, this.sendResume).then((resp) => {
            if (resp) {
              this.dialogAddVisible = false;
              this.initSendResume();
              // this.$refs["sendResumeForm"].resetFields();
            }
          });
        }
      });
    },

    doUpdate() {
      if (!this.sendResume.updateTime) {
            this.sendResume.updateTime = this.getNowFormatDate();
      }
      
      this.putRequest("/sendResume/update/",this.sendResume).then((resp) => {
        if (resp) {
          this.dialogUpdateVisible = false;
          this.initSendResume();
        }
      });
      
    },
    emptyForm() {
      this.sendResume = {
          id: "",
          hId: "",
          sendTime: "",
          updateTime: "",
          way: "",
          company: "",
          url: "",
          note: "",
        }
    },
    doDelete(id) {
      this.$confirm('确定删除这条投递记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/sendResume/delete/?id="+id).then(resp => {
                        if (resp) {
                            this.initSendResume();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
    },

    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var hour = date.getHours();
      var minu = date.getMinutes();
      var second = date.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate =
        year +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        hour +
        ":" +
        minu +
        ":" +
        second;
      return currentdate;
    },
  },
  computed: {
    url() {
      return this.note;
    },
  },
  
};
</script>

<style scoped>
.address{
  color: blue;
  text-decoration-line: none;
}
.address:hover{
  color: red;
}
</style>